panel: Stylesheet updates and minor improvements for panel buttons

- spin out all the panel button styling into a drawing mixin
- clean up the styles generally
- make special cases for the clock and non-flat buttons
- contrast fixes for non-flat buttons, fixes #6768
- new stop icon for the screen recording/cast indicators

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2804>

diff --git a/data/gnome-shell-icons.gresource.xml b/data/gnome-shell-icons.gresource.xml
index c1e575c44f48a658c030cdbc26cff73f99df7bd2..a5dd1247bc2afe788568c211484a51a3350e084f 100644 (file)
--- a/data/gnome-shell-icons.gresource.xml
+++ b/data/gnome-shell-icons.gresource.xml
@@ -14,6 +14,7 @@
     <file>scalable/actions/preview-close-symbolic.svg</file>
     <file>scalable/actions/record-screen-symbolic.svg</file>
     <file>scalable/actions/screencast-recorded-symbolic.svg</file>
+    <file>scalable/actions/screencast-stop-symbolic.svg</file>
     <file>scalable/actions/screenshooter-symbolic.svg</file>
     <file>scalable/actions/screenshot-ui-area-symbolic.svg</file>
     <file>scalable/actions/screenshot-ui-display-symbolic.svg</file>
@@ -31,7 +32,6 @@
     <file>scalable/status/no-notifications-symbolic.svg</file>
     <file>scalable/status/screen-privacy-disabled-symbolic.svg</file>
     <file>scalable/status/screen-privacy-symbolic.svg</file>
-    <file>scalable/status/stop-symbolic.svg</file>
   </gresource>
 </gresources>
 

diff --git a/data/icons/scalable/actions/screencast-stop-symbolic.svg b/data/icons/scalable/actions/screencast-stop-symbolic.svg
new file mode 100644 (file)
index 0000000..8ee70a4
--- /dev/null
+++ b/data/icons/scalable/actions/screencast-stop-symbolic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#2e3436" d="M4.5 3h7A1.5 1.5 0 0 1 13 4.5v7a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 11.5v-7A1.5 1.5 0 0 1 4.5 3Z"/></svg>
\ No newline at end of file

diff --git a/data/icons/scalable/status/stop-symbolic.svg b/data/icons/scalable/status/stop-symbolic.svg
deleted file mode 100644 (file)
index 256276a..0000000
--- a/data/icons/scalable/status/stop-symbolic.svg
+++ /dev/null
@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 4 4 h 8 v 8 h -8 z m 0 0" fill="#2e3436"/></svg>

diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index 8bb3b4b5d93b6a48d1f4f8c7b0e5c46ee0c1e4a2..ecc24d954d2105d78959037a328b18ada925b9df 100644 (file)
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -22,8 +22,8 @@ $outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg
 $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
 $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
 
-$warning_color: if($variant == 'light', $yellow_5, $yellow_3);
-$error_color: if($variant == 'light', $red_3, $red_4);
+$warning_color: if($variant == 'light', $yellow_4, $yellow_3);
+$error_color: if($variant == 'light', $red_4, $red_3);
 $success_color: if($variant == 'light', $green_4, $green_5);
 $destructive_color: $error_color;
 

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 1aaeb2f4d018013f68c596b551546bb1dd319703..87d987867893eee09898263ea1d4d3e1dd2e416d 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -357,3 +357,87 @@
   &:active {@include button(active, $c:$bg);}
   &:checked {@include button(checked, $c:$bg);}
 }
+
+//
+// Panel menu/button drawing function
+//
+// $bg: background color, derived from $panel_fg_color
+// $fg: foreground color, also derived from $panel_fg_color
+//
+// $flat:               if true, the button is filled instead of transparent
+// $highlighted_child:  if true, applies some special overrides for to a
+//                      child element, see _panel.scss for details
+//
+
+@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") {
+
+  transition-duration: 150ms;
+  border: 3px solid transparent;
+  border-radius: 99px;
+
+  font-weight: bold;
+  background-color: transparent;
+  color: $fg;
+
+  @if $flat {
+    box-shadow: none;
+
+    &:active, &:overview, &:focus, &:checked {
+      box-shadow: inset 0 0 0 100px transparentize($bg, 0.75);
+      &:hover {
+        box-shadow: inset 0 0 0 100px transparentize($bg, 0.65);
+      }
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 100px transparentize($bg, 0.8);
+    }
+
+  } @else {
+    box-shadow: inset 0 0 0 100px transparentize($bg, 0.2);
+
+    &:active, &:overview, &:focus, &:checked {
+      box-shadow: inset 0 0 0 100px $bg;
+      &:hover {
+        box-shadow: inset 0 0 0 100px transparentize($bg, 0.05);
+      }
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 100px transparentize($bg, 0.1);
+    }
+  }
+
+  // some overrides to style a child element
+  @if $highlighted_child {
+    box-shadow: none !important;
+
+    #{$child_class} {
+      transition-duration: 150ms;
+      border: 3px solid transparent;
+      border-radius: 99px;
+    }
+
+    &:active, &:overview, &:focus, &:checked {
+      box-shadow: none !important;
+
+      #{$child_class} {
+        box-shadow: inset 0 0 0 100px transparentize($bg, 0.75);
+      }
+
+      &:hover {
+        box-shadow: none !important;
+        #{$child_class} {
+          box-shadow: inset 0 0 0 100px transparentize($bg, 0.65);
+        }
+      }
+    }
+
+    &:hover {
+      box-shadow: none !important;
+      #{$child_class} {
+        box-shadow: inset 0 0 0 100px transparentize($bg, 0.8);
+      }
+    }
+  }
+}

diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 650d4fa8392539c989d76f3a6711408326541459..ee91d0d2169cee7fd3bf8e026a8116e63b2fbf63 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -23,103 +23,17 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   &:overview {
     background-color: transparent;
     box-shadow: none;
+
     .panel-button {
-      color: $panel_system_fg_color !important;
+      @include panel_button($panel_system_fg_color);
     }
   }
 
   // panel menus
   .panel-button {
-    font-weight: bold;
-    color: $panel_fg_color;
+    @include panel_button($panel_fg_color);
     -natural-hpadding: $base_padding * 2;
     -minimum-hpadding: $base_padding;
-    transition-duration: 150ms;
-    border: 3px solid transparent;
-    border-radius: 99px;
-
-    &.clock-display {
-      .clock {
-        transition-duration: 150ms;
-        border: 3px solid transparent;
-        border-radius: 99px;
-      }
-    }
-
-    &.screen-recording-indicator {
-      box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
-    }
-
-    &.screen-sharing-indicator {
-      box-shadow: inset 0 0 0 100px $warning_color;
-      StBoxLayout { margin: 0 $base_padding; }
-    }
-
-    &.screen-recording-indicator,
-    &.screen-sharing-indicator {
-      StBoxLayout {
-        spacing: $base_padding;
-      }
-
-      StIcon {
-        icon-size: $base_icon_size;
-      }
-    }
-
-    &:active, &:overview, &:focus, &:checked {
-      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
-
-      // The clock display needs to have the background on .clock because
-      // we want to exclude the do-not-disturb indicator from the background
-      &.clock-display {
-        box-shadow: none;
-
-        .clock {
-          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
-        }
-      }
-
-      &.screen-recording-indicator {
-        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
-      }
-      &.screen-sharing-indicator {
-        box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
-      }
-    }
-
-    &:hover {
-      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
-      &.clock-display {
-        box-shadow: none;
-        .clock {
-          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
-        }
-      }
-
-      &.screen-recording-indicator {
-        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
-      }
-      &.screen-sharing-indicator {
-        box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
-      }
-    }
-
-    &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
-      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
-      &.clock-display {
-        box-shadow: none;
-        .clock {
-          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
-        }
-      }
-
-      &.screen-recording-indicator {
-        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
-      }
-      &.screen-sharing-indicator {
-        box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
-      }
-    }
 
     // status area icons
     .system-status-icon {
@@ -142,63 +56,36 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
     &#panelActivities {
       -natural-hpadding: $base_padding * 3;
     }
-  }
 
-  &.unlock-screen,
-  &.login-screen,
-  &:overview {
-    .panel-button {
-      &:active, &:overview, &:focus, &:checked {
-        box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85);
-
-        &.clock-display {
-          box-shadow: none;
-
-          .clock {
-            box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85);
-          }
-        }
-
-        &.screen-recording-indicator {
-          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
-        }
-        &.screen-sharing-indicator {
-          box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
-        }
+    // screen activity indicators
+    &.screen-recording-indicator,
+    &.screen-sharing-indicator {
+      StBoxLayout {
+        spacing: $base_padding;
       }
 
-      &:hover {
-        box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90);
-        &.clock-display {
-          box-shadow: none;
-          .clock {
-            box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90);
-          }
-        }
-
-        &.screen-recording-indicator {
-          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
-        }
-        &.screen-sharing-indicator {
-          box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
-        }
+      StIcon {
+        icon-size: $base_icon_size;
       }
+    }
 
-      &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
-        box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8);
-        &.clock-display {
-          box-shadow: none;
-          .clock {
-            box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8);
-          }
-        }
-
-        &.screen-recording-indicator {
-          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
-        }
-        &.screen-sharing-indicator {
-          box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
-        }
+    &.screen-recording-indicator {
+      @include panel_button($screenshot_ui_button_red, $flat: false);
+    }
+
+    &.screen-sharing-indicator {
+      @include panel_button($warning_color, transparentize(black, 0.2), $flat: false);
+    }
+
+    // clock
+    &.clock-display {
+      // The clock display needs to have the background on .clock because
+      // we want to exclude the do-not-disturb indicator from the background
+      // see _drawing.scss for override details
+      @include panel_button($highlighted_child: true, $child_class:".clock");
+
+      .clock {
+        // the highlighted child
       }
     }
   }
@@ -231,10 +118,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
 
 
 // Clock
-
 .clock-display-box {
   spacing: 2px;
-
   .clock {
     padding-left: $base_padding * 2;
     padding-right: $base_padding * 2;

diff --git a/js/ui/status/remoteAccess.js b/js/ui/status/remoteAccess.js
index 1ed87931aefa5707359e435e12fa425589b8fcae..93980dcccc986f60a2f3ec99e62beba58b101e81 100644 (file)
--- a/js/ui/status/remoteAccess.js
+++ b/js/ui/status/remoteAccess.js
@@ -83,7 +83,7 @@ var ScreenRecordingIndicator = GObject.registerClass({
         });
         this._box.add_child(this._label);
 
-        this._icon = new St.Icon({ icon_name: 'stop-symbolic' });
+        this._icon = new St.Icon({icon_name: 'screencast-stop-symbolic'});
         this._box.add_child(this._icon);
 
         this.hide();
@@ -150,7 +150,7 @@ var ScreenSharingIndicator = GObject.registerClass({
         let icon = new St.Icon({icon_name: 'screen-shared-symbolic'});
         this._box.add_child(icon);
 
-        icon = new St.Icon({icon_name: 'window-close-symbolic'});
+        icon = new St.Icon({icon_name: 'screencast-stop-symbolic'});
         this._box.add_child(icon);
 
         this._controller = global.backend.get_remote_access_controller();